<template>
    <el-card>
        <template #header>
            <div class="u619_div">
                <span>院系管理</span>
            </div>
        </template>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item>
                    <el-input class="w-[280px]" v-model="queryParams.name" placeholder="院系名称" clearable
                        @keyup.enter="resetPage"></el-input>
                </el-form-item>

                <el-form-item>
                    <daterange-picker placeholder="以创建时间范围筛选" v-model:startTime="queryParams.created_start_date"
                        v-model:endTime="queryParams.created_end_date"></daterange-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="resetPage">
                        <div>
                            <span class="search_btn_icon"> </span>
                            查询
                        </div>
                    </el-button>
                    <el-button @click="resetParams">
                        <div>
                            <span class="reset_btn"></span>
                            重置
                        </div>
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" shadow="never">
            <el-button type="primary" @click="addUser"><span class="add_btn_icon"></span> 添加院系</el-button>

            <el-table stripe class="mt-2" size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="院系名称" prop="name"></el-table-column>
                <el-table-column label="院系描述" prop="describe"></el-table-column>
                <el-table-column label="关联班级（个）" prop="classes_num"></el-table-column>
                <el-table-column label="关联学生（个）" prop="student_num"></el-table-column>
                <el-table-column label="创建时间" prop="created_at"></el-table-column>

                <el-table-column label="操作" min-width="130" fixed="right">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <el-button class="custom-btn" plain type="primary" @click="handleView(row)">
                                <span class="view_btn_icon"> </span>
                                详情
                            </el-button>
                            <el-button class="custom-btn" plain type="primary" @click="handleEdit(row)">
                                <span class="deilt_btn_icon"> </span> 编辑</el-button>

                            <el-button plain class="custom-btn" type="danger" @click="handleDelete(row.id)"><span
                                    class="delect_btn_icon"></span> 删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" background="red" layout="prev, pager, next, sizes">
                </pagination>
            </div>
        </el-card>

        <!-- <AddTeacherModal :open="true" /> -->
        <add-user-pop v-if="popShow" ref="addUserPopRef" @close="popClose" @confirm="popConfirm"
            :type="popType"></add-user-pop>
    </el-card>
</template>
<script lang="ts" setup name="consumerLists">
import { delDepartment, getDepartmentList } from '@/api/consumer';
import { usePaging } from '@/hooks/usePaging';
import feedback from '@/utils/feedback';
import addUserPop from '../modals/addUserPop.vue';

const router = useRouter();

//弹框ref
const addUserPopRef = shallowRef();
const popShow = ref(false);

// 弹窗类型
const popType = ref('');

const queryParams = reactive({
    name: '',
    created_start_date: '',
    created_end_date: '',
});

const isSelect = ref<number[]>([]);

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getDepartmentList,
    params: queryParams,
});
//打开创建用户弹框
const addUser = async () => {
    popShow.value = true;
    await nextTick();
    addUserPopRef.value.open();
    //   addUserPopRef.value.setFormData({
    //     nickname: "测试",
    //   });
};



const handleDelete = async (id: number[] | number) => {
    await feedback.prompt(`是否确定删除该班级？`, `操作确认`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "textarea",
        inputPlaceholder: "请输入备注",
        callback: async ({ action, value }: any) => {
            if (action == "confirm") {
                console.log("确认了");
                try {
                    await delDepartment({ id, remark: value });

                    getLists();
                } catch (error) { }
            } else {
            }
        },
        type: "warning",
    });
};

// 编辑
const handleEdit = async (data: any) => {
    popShow.value = true;
    await nextTick();
    addUserPopRef.value.open();
    addUserPopRef.value.setFormData({ ...data });
};

//多选
const handleSelectionChange = (value: any) => {
    isSelect.value = value.map((item: any) => item.id);
};

// 查看详情
const handleView = async (data: any) => {
    popShow.value = true;
    popType.value = 'view';
    await nextTick();
    addUserPopRef.value.open();
    addUserPopRef.value.setFormData({ ...data });
};

//弹框关闭
const popClose = () => {
    popShow.value = false;
    popType.value = '';
};

const popConfirm = () => {
    getLists();
    popShow.value = false;
    popType.value = '';
};

onActivated(() => {
    getLists();
});

getLists();

// 路由跳转
const gotoDeatil = () => {
    router.push('/user/student/detail');
};
</script>

<style lang="scss" scoped></style>
